/*
 * @Author: your name
 * @Date: 2021-04-27 11:08:00
 * @LastEditTime: 2021-04-30 08:11:54
 * @LastEditors: 邢
 * @Description: In User Settings Edit
 * @FilePath: \ribao\daily-1807a-6\项目代码\project2\wipi\src\component\File\highlight.tsx
 */
import { useEffect, useRef } from "react";
import hljs from 'highlight.js';
import { observer } from "mobx-react-lite";

interface IProps{
    str: string
}

const Highlight: React.FC<IProps> = props=>{
    const ref = useRef<HTMLDivElement>(null)
    useEffect(()=>{
        ref.current!.querySelectorAll('pre code').forEach((block) => {
            console.log('block', block);
            hljs.highlightBlock(block as HTMLElement);
        });
    }, [props.str])

    return <div ref={ref} dangerouslySetInnerHTML={{__html: props.str}}></div>
}

export default observer(Highlight);